<!doctype html>
<html lang="en">
<!--[if IE 9 ]>
<html  lang="en" class="ie9">
<![endif]-->
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>报表管理</title>
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/icons.css">
    <link rel="stylesheet" href="css/generics.css">
    <link rel="stylesheet" href="css/jedate.css">
    <style>
   /*     .his-time {
           padding-right:30px;
           padding-top:3px;
           font-size:15px;
        }*/

        .line>div{
            top:-6%;
            left:2%;
        }
        .line>div{
            top:-6%;
            left:2%;
        }


        .his-time-content {
       /*     width: 25%;
            position:absolute;
            left: 17%;*/
        }
        .form-horizontal {
           padding-right: 8px;
        }
    </style>
</head>
<body>
<header id="header" class="media">
    <a href="" id="menu-toggle"></a>
    <a class="logo pull-left" href="index.html">
        <img src="images/logo.png" alt="logo">
    </a>
    <div class="media-body">
        <div class="media" id="top-menu">
            <div class="pull-left tm-icon">
                <a data-drawer="messages" class="drawer-toggle" href="">
                    <i class="sa-top-message"></i>
                    <span>时间回溯</span>
                </a>
            </div>
            <div class="pull-left tm-icon">
                <a data-drawer="notifications" class="drawer-toggle" href="">
                    <i class="sa-top-updates"></i>
                    <span>帮助</span>
                </a>
            </div>
            <div id="time" class="pull-right">
                <span id="hours"></span>
                :
                <span id="min"></span>
                :
                <span id="sec"></span>
            </div>
            <div class="media-body">
                <input type="text" class="main-search">
            </div>
        </div>
    </div>
</header>
<div class="clearfix"></div>
<section id="main" class="p-relative" role="main">
    <!-- Sidebar -->
    <aside id="sidebar">
        <!-- Side Menu -->
        <ul class="list-unstyled side-menu">
            <li>
                <a class="sa-side-home" href="index.html">
                    <span class="menu-item">首页</span>
                </a>
            </li>
            <li class="active">
                <a class="sa-side-formset" href="fromSetting.html">
                    <span class="menu-item">报表管理</span>
                </a>
            </li>            
        </ul>
    </aside>
    <!-- Content -->
    <section id="content" class="container">
        <!-- Messages Drawer时间回溯 -->
        <div id="messages" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">时间回溯</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 17/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 18/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/5.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Wendy Mitchell - On 19/12/2013</small><br>
                            <a class="t-overflow" href="">Integer a eros dapibus, vehicula quam accumsan, tincidunt purus</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <!-- Notification Drawer帮助 -->
        <div id="notifications" class="tile drawer animated">
            <div class="listview narrow">
                <div class="media">
                    <a href="">帮助</a>
                    <span class="drawer-close">&times;</span>
                </div>
                <div class="overflow" style="height: 254px">
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - 2 Hours ago</small><br>
                            <a class="t-overflow" href="">Mauris consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - 5 Hours ago</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/3.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Harris worgon - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Maecenas venenatis enim condimentum ultrices fringilla. Nulla eget libero rhoncus, bibendum diam eleifend, vulputate mi. Fusce non nibh pulvinar, ornare turpis id</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/4.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Mitch Bradberry - On 14/12/2013</small><br>
                            <a class="t-overflow" href="">Phasellus interdum felis enim, eu bibendum ipsum tristique vitae. Phasellus feugiat massa orci, sed viverra felis aliquet quis. Curabitur vel blandit odio. Vestibulum sagittis quis sem sit amet tristique.</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/1.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">Nadin Jackson - On 15/12/2013</small><br>
                            <a class="t-overflow" href="">Ipsum wintoo consectetur urna nec tempor adipiscing. Proin sit amet nisi ligula. Sed eu adipiscing lectus</a>
                        </div>
                    </div>
                    <div class="media">
                        <div class="pull-left">
                            <img width="40" src="img/profile-pics/2.jpg" alt="">
                        </div>
                        <div class="media-body">
                            <small class="text-muted">David Villa - On 16/12/2013</small><br>
                            <a class="t-overflow" href="">Suspendisse in purus ut nibh placerat Cras pulvinar euismod nunc quis gravida. Suspendisse pharetra</a>
                        </div>
                    </div>
                </div>
                <div class="media text-center whiter l-100">
                    <a href=""><small>VIEW ALL</small></a>
                </div>
            </div>
        </div>
        <h4 class="page-title">报表管理页面</h4>
        <div class="block-area" id="defaultStyle">
            <table class="table tile">
                <thead>
                <tr>
                    <th>报表名称</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <th>类型</th>
                    <th>修改时间</th>
                    <th>修改人</th>
                    <th>上次发送时间</th>
                    <th>下次发送时间</th>
                    <th>接收邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                        <img src="images/default.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                        <img src="images/default.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                        <img src="images/default.png" alt="">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="block-area" id="defaultStyle2">
            <h3 class="block-title">告警级别统计</h3>
            <table class="table tile">
                <thead>
                <tr>
                    <th>报表名称</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <th>类型</th>
                    <th>修改时间</th>
                    <th>修改人</th>
                    <th>上次发送时间</th>
                    <th>下次发送时间</th>
                    <th>接收邮箱</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                    </td>
                </tr>
                <tr>
                    <td>告警级别统计1</td>
                    <td>2017/08/04 11:03:24</td>
                    <td>小甲</td>
                    <td>综合报表</td>
                    <td>2017/08/04 11:05:24</td>
                    <td>小丫</td>
                    <td>2017/08/02 11:05:24</td>
                    <td>2017/08/06 11:05:24</td>
                    <td>253648321@qq.com</td>
                    <td>
                        <img src="images/edit.png" alt="">
                        <img src="images/false.png" alt="">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="block-area">
	        <div class="row">
	            <div class="col-md-6">
	                <div class="tile">
	                    <h2 class="tile-title">饼图</h2>
	                    <div class="tile-config dropdown">
	                        <a data-toggle="dropdown" href="" class="tile-menu"></a>
	                        <ul class="dropdown-menu pull-right text-right">
	                            <li>
	                                <a class="tile-info-toggle" href="">Chart Information</a>
	                            </li>
	                            <li>
	                                <a href="">Refresh</a>
	                            </li>
	                            <li>
	                                <a href="">Settings</a>
	                            </li>
	                        </ul>
	                    </div>
	                    <div class="p-10">
	                        <div class="main-chart" style="height: 30rem; padding: 0px; position: relative;">
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="col-md-6">
	                <div class="tile">
	                    <h2 class="tile-title">柱图</h2>
	                    <div class="tile-config dropdown">
	                        <a data-toggle="dropdown" href="" class="tile-menu"></a>
	                        <ul class="dropdown-menu pull-right text-right">
	                            <li>
	                                <a href="">Refresh</a>
	                            </li>
	                            <li>
	                                <a href="">Settings</a>
	                            </li>
	                        </ul>
	                    </div>
	                    <div class="p-10">
	                        <div class="bar" style="height: 30rem; padding: 0px; position: relative;">
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
        <div class="block-area">	
	        <div class="row">
	            <div class="col-md-6">
	                <div class="tile">
	                    <h2 class="tile-title">大数据量面积图</h2>



	                    <div class="modal fade in" id="addNew-event" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content" style="background: #000;">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
											&times;
										</button>
										<h4 class="modal-title" id="myModalLabel">
											选择日期
										</h4>
									</div>
									<div class="modal-body">
										<div class="form-horizontal">
                                            <div class="form-group">
                                                <label for="historyTime" class="col-md-3 control-label">
                                                    历史时间段:
                                                </label>
                                                <div class="col-md-9">
                                                    <select class="form-control" id="historyTime"  style="background: rgba(0,0,0,0.0);">
                                                        <option>10分钟</option>
                                                        <option>30分钟</option>
                                                        <option>1小时</option>
                                                        <option>2小时</option>
                                                        <option>4小时</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <lable for="lineTimejg" class="col-md-3 control-label">线图点间隔:</lable>
                                                <div class="col-md-9">
                                                    <select class="form-control" id="lineTimejg" style="background: rgba(0,0,0,0.0);">
                                                        <option>10秒</option>
                                                        <option>1分钟</option>
                                                        <option>10分钟</option>
                                                        <option>1小时</option>
                                                        <option>1天</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <lable class="col-md-3 control-label">开始时间:</lable>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control input-sm workinput wicon" id="modalStarTime" readonly>
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <lable class="col-md-3 control-label">结束时间:</lable>
                                                <div class="col-md-9">
                                                    <input type="text" class="form-control input-sm" id="modalEndtime" readonly>
                                                </div>
                                            </div>
                                        </div>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭
										</button>
										<button type="button" class="btn btn-primary" data-dismiss="modal" id="subTimemodal">
											提交更改
										</button>
									</div>
								</div>
							</div>
						</div>



	                    <div class="tile-config dropdown">
	                        <a data-toggle="dropdown" href="" class="tile-menu"></a>
	                        <ul class="dropdown-menu pull-right text-right">
	                            <li>
	                                <a href="">Refresh</a>
	                            </li>
                                <li>
                                    <a href="#" style="cursor:pointer;" data-toggle="modal" data-target="#addNew-event">日期选择</a>
                                </li>
	                            <li>
	                                <a href="">Settings</a>
	                            </li>
	                        </ul>
	                    </div>
	                    <div class="p-10" style="overflow: hidden;">
	                        <div class="line" style="height: 30rem;width:110%;position: relative; left: -25px;">
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <div class="col-md-6">
	                <div class="tile">
	                    <h2 class="tile-title">地图</h2>
	                    <div class="tile-config dropdown">
	                        <a data-toggle="dropdown" href="" class="tile-menu"></a>
	                        <ul class="dropdown-menu pull-right text-right">
	                            <li>
	                                <a href="">Refresh</a>
	                            </li>
	                            <li>
	                                <a href="">Settings</a>
	                            </li>
	                        </ul>
	                    </div>
	                    <div class="p-10">
	                        <div class="map" style="height: 30rem; padding: 0px; position: relative;">
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	     </div>
    </section>
    <!-- Older IE Message -->
    <!--[if lt IE 9]>
    <div class="ie-block">
        <h1 class="Ops">抱歉！</h1>
        <p>您正在使用一个过时的Internet Explorer版本，升级到以下任何Web浏览器，以便访问该网站的最大功能。 </p>
        <ul class="browsers">
            <li>
                <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html">
                    <img src="img/browsers/chrome.png" alt="">
                    <div>Google Chrome</div>
                </a>
            </li>
            <li>
                <a href="http://www.firefox.com.cn/">
                    <img src="img/browsers/firefox.png" alt="">
                    <div>Mozilla Firefox</div>
                </a>
            </li>
            <li>
                <a href="http://www.oupeng.com/download">
                    <img src="img/browsers/opera.png" alt="">
                    <div>Opera</div>
                </a>
            </li>
            <li>
                <a href="https://www.apple.com/cn/safari/">
                    <img src="img/browsers/safari.png" alt="">
                    <div>Safari</div>
                </a>
            </li>
            <li>
                <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">
                    <img src="img/browsers/ie.png" alt="">
                    <div>Internet Explorer(New)</div>
                </a>
            </li>
        </ul>
        <p>升级你的浏览器更安全和更快的网络体验。 <br/>感谢你的支持...</p>
    </div>
    <![endif]-->
</section>
</body>
</html>
<!-- jQuery -->
<script src="js/jquery.min.js"></script> <!-- jQuery Library -->
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/icheck.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/functions.js"></script>
<script src="js/jquery.jedate.js"></script>
<script src="js/changebgsave.js"></script>
<script>
    ~function (){
        var myChart = echarts.init($(".main-chart")[0]);
        var app = {};
        app.title = '嵌套环形图';
        option = {
//            backgroundColor:"rgba(0,0,0,0.2)",
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                itemGap:20,
                data:['直达','营销广告','搜索引擎'],
                textStyle:{
                    color:"#ffffff"
                }
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    selectedMode: 'single',
                    radius: [0, '95%'],
                    label: {
                        normal: {
                            position: 'inner'
                        },
                        textStyle:{
                            color:"#ffffff"
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {
                            value:335,
                            name:'直达',
                            itemStyle:{
                                normal:{
                                    color:"rgba(222,147,37,0.5)"
                                }
                            }
                        },
                        {
                            value:679,
                            name:'营销广告',
                            itemStyle:{
                                normal:{
                                    color:"rgba(207,178,169,0.5)"
                                }
                            }
                        },
                        {
                            value:1548,
                            name:'搜索引擎',
                            itemStyle:{
                                normal:{
                                    color:"rgba(106,176,184,0.5)"
                                }
                            }
                        }
                    ],
                    center:["60%","50%"]
                }
            ]
        };
        myChart.setOption(option);
        myChart.on("click",function(params){
            if($(".thead th").eq(0).text() != "名称"){
                $(".table-box").fadeOut();
                $(".thead th").eq(0).text("名称");
                $(".thead th").eq(1).text("数值");
                $(".thead th").eq(2).text("占比%");
                $(".charts-table tr:not('.thead')").remove();
                $(".table-box").fadeIn();
            }
            if($(".table-box").hasClass("none")){
                if($(".pd-name").text().indexOf(params.data.name) == -1){
                    $("<tr>" +
                            "<td class='pd-name'>"+params.data.name+"</td>"+
                            "<td>"+params.data.value+"</td>"+
                            "<td>"+params.percent+"</td>"+
                            "</tr>").on("mouseover","mouseout",function(){}).appendTo($(".charts-table"));
                }
                $(".table-box").removeClass("none").fadeIn(1500).animate({top:"0"},1500).parent().animate({height:$(".table-box").height()},1500);
            }else{
                if($(".pd-name").text().indexOf(params.data.name) == -1){
                    $("<tr>" +
                            "<td class='pd-name'>"+params.data.name+"</td>"+
                            "<td>"+params.data.value+"</td>"+
                            "<td>"+params.percent+"</td>"+
                            "</tr>").on("mouseover","mouseout",function(){}).appendTo($(".charts-table"));
                    $(".table-box").parent().height($(".table-box").height());
                }
            }
        });
        $(".close-table").click(function(){
            $(this).parent().parent().fadeOut(1500).addClass("none").css("top","-500rem").parent().animate({height:0},1500);
        });
        $(window).resize(function(){
            myChart.resize();
        })
    }();
    +function(){
        var myChart = echarts.init($(".bar")[0]);
        var app = {};
        app.title = '坐标轴刻度与标签对齐';
        option = {
//            backgroundColor:"rgba(0,0,0,0.2)",
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
                }
            ],
            series : [
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220],
                    itemStyle:{
                        normal:{
                            color:function(params){
                                var color = ["rgba(217,217,217,0.4)","rgba(217,217,217,0.8)","rgba(217,217,217,0.2)",
                                    "rgba(217,217,217,0.4)","rgba(217,217,217,0.8)","rgba(217,217,217,0.2)",
                                    "rgba(217,217,217,0.4)"];
                                return color[params.dataIndex];
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        myChart.on("click",function(params){
            if($(".thead th").eq(0).text() != "星期"){
                $(".table-box").fadeOut();
                $(".thead th").eq(0).text("星期");
                $(".thead th").eq(1).text("数值");
                $(".thead th").eq(2).text("访问方式");
                $(".charts-table tr:not('.thead')").remove();
                $(".table-box").fadeIn();
            }
            if($(".table-box").hasClass("none")){
                if($(".pd-name").text().indexOf(params.name) == -1){
                    $("<tr>" +
                            "<td class='pd-name'>"+params.name+"</td>"+
                            "<td>"+params.value+"</td>"+
                            "<td>"+params.seriesName+"</td>"+
                            "</tr>").on("mouseover","mouseout",function(){}).appendTo($(".charts-table"));
                }
                $(".table-box").removeClass("none").fadeIn(1500).animate({top:"0"},1500).parent().animate({height:$(".table-box").height()},1500);
            }else{
                if($(".pd-name").text().indexOf(params.name) == -1){
                    $("<tr>" +
                            "<td class='pd-name'>"+params.name+"</td>"+
                            "<td>"+params.value+"</td>"+
                            "<td>"+params.seriesName+"</td>"+
                            "</tr>").on("mouseover","mouseout",function(){}).appendTo($(".charts-table"));
                    $(".table-box").parent().height($(".table-box").height());
                }
            }
        });
        $(window).resize(function(){
            myChart.resize();
        })
    }();
    -function (){
        var myChart = echarts.init($(".line")[0]);
        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        option = {
            title: {
                left: 'center',
                text: '最大值:0.22,平均值:0.14,最小值:0.10',
                textStyle:{
                    color:"#fff",
                    fontSize:"12",
                    fontWeight:"normal"
                },
                top:"10%"
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    }
                },
                iconStyle:{
                    normal:{
                        borderColor:"#fff",
                        textAlign:"left"
                    }
                },
                orient: "horizontal",
                top:"9%",
                right:"10%"
                },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date,
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                },
                axisLabel:{
                    margin:40
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                axisLine:{
                    lineStyle:{
                        color:"#fff"
                    }
                }
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
//                handleIcon: 'M0,0 v9.7h5 v-9.7h-5 Z',
            /*    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,' +
                '4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,' +
                '16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',*/
               /*  handleIcon: 'none', */
                handleSize: '100%',
                borderColor:"none",
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                },
                textStyle:{
                    color:"#fff"
                },
                left:"center",
                bottom:"30px;"
            }],
            series: [
                {
                    name:'模拟数据',
                    type:'line',
                    smooth:true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: 'rgba(255, 255, 255,.8)'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(255, 255, 255,.5)'
                            }, {
                                offset: 1,
                                color: 'rgba(255, 255, 255,.3)'
                            }])
                        }
                    },
                    data: data
                }
            ]
        };
        function old(){
            option = {
//            backgroundColor:"rgba(0,0,0,0.2)",
                title: {
                    text: '折线图堆叠',
                    textStyle:{
                        color:"#fff"
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color:"#fff"
                        }
                    }
                },
                series: [
                    {
                        type:'line',
                        stack: '总量',
                        data:[120, 132, 101, 134, 90, 230, 210],
                        itemStyle:{
                            normal:{
                                color:"rgba(222,147,34,1)"
                            }
                        }
                    }
                ]
            };
        }
        myChart.setOption(option);
        $(window).resize(function(){
            myChart.resize();
        })
    }();
    !function (){
        var myChart = echarts.init($(".map")[0],"shine");
        function randomData() {
            return Math.round(Math.random()*1000);
        }
        option = {
//            backgroundColor:"rgba(0,0,0,0.2)",
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            series: [
                {
                    name: '中国',
                    type: 'map',
                    mapType: 'china',
                    selectedMode : 'multiple',
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
        $(window).resize(function(){
            myChart.resize();
        })
    }();
    ~function (){
        var start = {
            format: 'YYYY-MM-DD hh:mm:ss',
            /*     minDate: '2014-06-16 23:59:59', //设定最小日期为当前日期*/
//        isinitVal:true,
            /*        ishmsVal:false,*/
            maxDate: $.nowDate({DD:0}), //最大日期
            choosefun: function(elem, val, date){
                end.minDate = date; //开始日选好后，重置结束日的最小日期
                endDates();
            }
        };
        var end = {
            format: 'YYYY-MM-DD hh:mm:ss',
//            minDate: $.nowDate({DD:0}), //设定最小日期为当前日期
            maxDate:$.nowDate({DD:0}), //最大日期
            choosefun: function(elem, val, date){
                start.maxDate = date; //将结束日的初始值设定为开始日的最大日期
            }
        };
        //这里是日期联动的关键
        function endDates() {
            //将结束日期的事件改成 false 即可
            end.trigger = false;
            $("#modalEndtime").jeDate(end);
        }
        $('#modalStarTime').jeDate(start);
        $('#modalEndtime').jeDate(end);
        $("#subTimemodal").click(function(){
            console.log($("#historyTime").val());
            console.log($("#lineTimejg").val());
            console.log($("#modalStarTime").val());
            console.log($("#modalEndtime").val());
        });
    }();

</script>